<script setup lang="ts">
defineProps<{ content: string }>();
</script>

<template>
  <div class="result-content highlight-wrapper" v-dompurify-html="content"></div>
</template>

<style scoped lang="scss">
.result-content {
  height: 44px;
  @include tip1;
  overflow: hidden;
  position: relative;
  color: var(--o-color-info2);
  @include respond-to('laptop') {
    height: 44px;
  }
  @include respond-to('pad_h') {
    height: 36px;
  }
  @include respond-to('pad_v') {
    height: 36px;
  }
  @include respond-to('phone') {
    height: 32px;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 24px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, #fff 100%);

  }
}
@include in-dark {
  .result-content {
    &::after {
      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 0.75) 50%, rgb(var(--o-mixedgray-4)) 100%);
    }
  }
}
</style>